import React, { lazy, Suspense } from 'react';
//导入路由组件
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom'
//导入两个页面
import Home from './pages/Home'
// import CityList from './pages/CityList'
// import Map from './pages/Map'

// //房源详情组件
// import HouseDetail from './pages/HouseDetail'

// // 登录
// import Login from './pages/Login'

// //房源发布
// import Rent from './pages/Rent'
// import RentAdd from './pages/Rent/Add'
// import RentSearch from './pages/Rent/Search'

//导入鉴权路由组件
import AuthRoute from './components/AutoRoute'

//使用动态组件的方式导入组件
const CityList = lazy(() => import('./pages/CityList'))
const Map = lazy(() => import('./pages/Map'))
const HouseDetail = lazy(() => import('./pages/HouseDetail'))
const Login = lazy(() => import('./pages/Login'))
const Rent = lazy(() => import('./pages/Rent'))
const RentAdd = lazy(() => import('./pages/Rent/Add'))
const RentSearch = lazy(() => import('./pages/Rent/Search'))

function App() {
  return (
    <Router>
      <Suspense fallback={<div className='route-loading'>loading...</div>}>
        <div className="App">
          {/* 路由重定向 */}
          <Route exact path='/' render={() => <Redirect to='/home' />} />
          {/* 路由规则 */}
          {/* Home 组件是父路由的内容 */}
          <Route path='/home' component={Home} />
          <Route path='/cityList' component={CityList} />
          <AuthRoute path='/map' component={Map} />

          {/* 房源详情的路由规则 */}
          <Route path='/detail/:id' component={HouseDetail} />
          <Route path="/login" component={Login} />

          {/* 配置登录后，才能访问的页面 */}
          <AuthRoute exact path="/rent" component={Rent}></AuthRoute>
          <AuthRoute path="/rent/add" component={RentAdd}></AuthRoute>
          <AuthRoute path="/rent/search" component={RentSearch}></AuthRoute>
        </div>
      </Suspense>
    </Router >
  );
}

export default App;
